<template>
    <div class="report-wenzong">
        <div class="header"></div>
        <div class="body">
            <h4>
                <span>05</span>知识得分情况分析
            </h4>
            <div class="list">
                <table>
                    <thead>
                        <tr>
                            <th>知识模块</th>
                            <th>平均得分率</th>
                            <th>个人得分率</th>
                            <th>成就度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in tableData" :key="index">
                            <td>{{item.knowledgeI}}</td>
                            <td>{{Math.round(item.avgScoringRate*100)}}%</td>
                            <td>{{Math.round(item.selfScoringRate*100)}}%</td>
                            <td>
                                <span v-if="item.selfScoringRate<=0.3">薄弱</span>
                                <span v-if="item.selfScoringRate<=0.5&&item.selfScoringRate>0.3">待提高</span>
                                <span v-if="item.selfScoringRate<=0.7&&item.selfScoringRate>0.5">良好</span>
                                <span v-if="item.selfScoringRate>0.7">优秀</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="chart" v-if="option.xAxis[0].data.length">
                <chart :options="option" :style="{width:'90%','margin-left':'5%'}"></chart>
                <div class="legend">
                    <span>
                        <i class="avg"></i>平均得分率</span>
                    <span>
                        <i class="get"></i>个人得分率</span>
                </div>
            </div>
            <div class="info">
                <p>
                    <img src="../../assets/img/sanjiao.png" alt=""> {{comment}}
                </p>
            </div>
            <div @click="$router.go(-1)" class="back">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-ce1"></use>
                </svg>
                返回
            </div>
        </div>
    </div>
</template>

<script>
import io from '../../lib/io'
import util from '../../lib/util'
import echarts from 'echarts'
export default {
    data() {
        return {
            reportId: '',
            sysCode: '',
            tableData: [],
            option: {
                dataZoom: [{
                    type: 'inside',
                    zoomLock:'true',
                    show: true, //flase直接隐藏图形
                    xAxisIndex: [0],
                    left: '9%', //滚动条靠左侧的百分比
                    bottom: -5,
                    start: 0,//滚动条的起始位置
                    end: 20 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                }],
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        splitNumber:6,
                        interval:600,
                        axisLabel: {
                            fontSize: 20,
                            rotate:-18,
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: 1,
                        axisLabel: {
                            formatter: function(value, index) {
                                return value * 100 + '%'
                            },
                            fontSize: 20,
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '平均得分率',
                        type: 'bar',
                        barWidth : 20,
                        barGap:'5%',
                        data: [],
                        itemStyle: {
                            normal: {
                                //颜色渐变
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fe8a7f'
                                }, {
                                    offset: 1,
                                    color: '#f73a62'
                                }])
                            }
                        },
                    },
                    {
                        name: '个人得分率',
                        type: 'bar',
                        barWidth : 20,
                        barGap:'5%',
                        data: [],
                        itemStyle: {
                            normal: {
                                //颜色渐变
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#4c5ceb'
                                }, {
                                    offset: 1,
                                    color: '#08025e'
                                }])
                            }
                        }
                    }
                ]
            },
            comment: "",
        }
    },
    created() {
        this.reportId = this.$route.query.reportId
        this.sysCode = util.getSysCode(this.$route.query.areamTeamId)
        this.reportKnow()
    },
    methods: {
        reportKnow() {
            let param = {
                reportId: this.reportId,
                sysCode: this.sysCode,
            }
            io.post(io.reportKnowI, param, (ret) => {
                if (ret.success) {
                    this.comment = ret.data.comment
                    let data = ret.data.list
                    let knowledgeI = []
                    let selfScoringRate = []
                    let avgScoringRate = []
                    this.tableData = data
                    data.map((item) => {
                        knowledgeI.push(item.knowledgeI)
                        selfScoringRate.push(item.selfScoringRate)
                        avgScoringRate.push(item.avgScoringRate)
                    })

                    this.option.xAxis[0].data = knowledgeI
                    this.option.series[0].data = avgScoringRate
                    this.option.series[1].data = selfScoringRate
                    console.log(this.option)
                } else {
                    alert(ret.desc)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.report-wenzong {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    background: #edf5ff;
    position: relative;
    .header {
        height: 2.5rem;
        background: url('../../assets/img/rep-bg.png');
    }
}

.body {
    background: white;
    width: 90%;
    margin-left: 5%;
    min-height: 90vh;
    position: absolute;
    top: 3vh;
    border-radius: 0.1rem;
    margin-bottom: 1rem;
    box-shadow: 0px 5px 18px 0px rgba(189, 217, 253, 0.5);
    -webkit-overflow-scrolling: touch;
    h4 {
        height: 0.4rem;
        font-size: 0.4rem;
        line-height: 0.4rem;
        font-weight: normal;
        color: #ff7853;
        margin-top: 0.4rem;
        margin-left: 0.44rem;
        margin-bottom: 0.5rem;
        span {
            font-size: 0.52rem;
            height: 0.4rem;
            line-height: 0.4rem;
            font-weight: normal;
            display: inline-block;
            color: #74a5e1;
            padding-right: 0.22rem;
            border-right: 3px solid #74a5e1;
            font-weight: 100;
            float: left;
            margin-right: 0.2rem;
        }
    }
    .list {
        padding: 0 0.3rem;
        table {
            width: 100%;
            tr {
                // border-bottom: 1px solid #edecec;
                th {
                    font-size: 0.24rem;
                    line-height: 0.34rem;
                    font-weight: normal;
                    color: #7aa0cf;
                    padding: 0.07rem;
                    width: 25%;
                    border-bottom: 1px solid #edecec;
                }
                td {
                    font-size: 0.24rem;
                    line-height: 0.34rem;
                    font-weight: normal;
                    color: #333;
                    padding: 0.07rem;
                    width: 25%;
                    text-align: center;
                    border-bottom: 1px solid #edecec;
                }
            }
        }
    }
    .chart {

        margin: 0.4rem 0.3rem 0 0.3rem;
        padding-bottom: 0.28rem;
        border-bottom: 1px dashed #b9b9b9;
        .legend {
            text-align: center;
            margin-top: 0.2rem;
            i {
                display: inline-block;
                width: 0.22rem;
                height: 0.22rem;
                border-radius: 50%;
                vertical-align: -0.03rem;
                margin-right: 0.1rem;
            }
            span+span {
                margin-left: 0.4rem;
            }
            .all {
                background-color: #d0dafd;
            }
            .get {
                background: #336af0;
            }
            .avg {
                background: #ff5501;
            }
        }
    }
    .info {
        padding: 0.25rem 0.3rem;
        font-size: 0.24rem;
        line-height: 0.36rem;
        color: #333;
        p {
            span {
                em {
                    font-style: normal;
                }
            }
        }
    }
    .back {
        font-size: 0.28rem;
        color: #9ab9df;
        font-weight: normal;
        position: absolute;
        left: 50%;
        bottom: -0.7rem;
        transform: translateX(-50%);
        .icon {
            font-size: 0.26rem;
        }
    }
}
</style>
